<template>
    <div class="give">
        <div class="top" v-if="showTopCard&&!isEmpty">
            <div class="totalScore">
                <h3>{{allScores}}</h3>
                <p>共捐献金额(积分)</p>
            </div>
        </div>
        <div class="list-box" v-for="(item,index) in dataList" :key="index" v-if="!isEmpty">
            <List
                    again="1"
                    :id="item.id"
                  :uid="item.uid"
                  :title="item.title"
                  :min_money="item.cmoney"
                  :max_money="item.money"
                  :avater="item.avatar"
                  :score="item.dmoney"
                  :name="item.nickname"
                  :date="item.create_time"
            ></List>
        </div>
        <empty v-if="isEmpty" :imgurl="empty_img" text="暂无捐献~"></empty>
    </div>

</template>

<script>
    import List from '@/components/list'
    import Empty from '@/components/empty'
    export default {
        name: "give",
        components:{
            List,Empty
        },
        data(){
            return {
                logo: require('../../assets/img/banner.png'),
                imgurl: require('../../assets/img/banner.png'),
                isEmpty:false,
                showTopCard:false,
                empty_img:require('../../assets/img/give-empty.png'),
                dataList:[],
                allScores:null
            }
        },
        mounted(){
          this.getData()
        },
        methods:{
            getData(){
                this.$http.post('index/myDonation',{}).then(res=>{
                    console.log(res)
                    this.dataList = res.data.data.data;
                    this.allScores = res.data.allMoney;
                    this.showTopCard = true;
                    if(!this.dataList.length){
                        this.isEmpty = true
                    }
                })
            }

        }
    }
</script>

<style scoped lang="less">
    .give{
        .top{
            padding: 30px;
            background: white;
            margin-bottom: 20px;
            .totalScore{
                background: url("../../assets/img/give-bg.png") no-repeat 100% 100%;
                background-size:100% 100% ;
                width: 690px;
                height: 200px;
                text-align: center;
                color:white;
                overflow: hidden;
                h3{
                    font-size: 50px;
                    margin-top: 30px;
                }
                p{
                    font-size: 24px;
                }
            }
        }
        .list-box{
            background: white;
            padding: 0 30px;
            margin-bottom: 2px;
        }

    }
</style>
